<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://unpkg.com/vue"></script>
</head>
<body>
<div id="app-7">
    <ol>
        <todo-item
            v-for = "item in groceryList"
            v-bind:todo = "item"
            v-bind:key = "item.id">
        </todo-item>
    </ol>
</div>
<script>
    Vue.component('todo-item',{
        props:['todo'],
        template:'<li>{{ todo.text }}</li>'
    });
    var app7 = new Vue({
        el:'#app-7',
        data:{
            groceryList:[
                { id:0,text:'蔬菜' },
                { id:1,text:'奶酪' },
                { id:2,text:'随便其他什么人吃的东西' }
            ]
        }
    });
</script>
</body>
</html>